<template>
    <div>
<!--        相关操作-->
        <div class="buttonCardLayout">
            <el-card class="box-card">
                <div style="display: inline-block;width: 100%">
<!--                批量删除-->
                    <el-button type="primary" class="batchDeleteButton"  @click="batchDeleteLabel">批量删除</el-button>
<!--                新增标签-->
                    <el-button type="primary" class="addButton" @click="dialogVisible=true,dialogTitle='新增标签信息'">新增</el-button>
<!--                根据发布人查询标签-->
                    <el-select
                            style="margin-right: 10px;"
                            v-model="queryLabels_content"
                            @change="queryAllLabels"
                            filterable
                            placeholder="请选择发布人">
                        <el-option
                                v-for="label in labelContentData"
                                :key="label.id"
                                :label="label.content"
                                :value="label.id">
                        </el-option>
                    </el-select>
                </div>

            </el-card>
        </div>
<!--        表格内容-->
        <div class="tableCardLayout" >
            <el-card class="box-card">
                <el-table
                        :data="labelData"
                        style="width: 100%;margin-bottom: 20px;min-height: 650px;"
                        row-key="id"
                        height="600"
                        @selection-change="changeSelectedIds">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            prop="content"
                            sortable
                            label="内容">
                    </el-table-column>
                    <el-table-column
                            prop="createTime"
                            label="发布时间"
                            sortable>
                        <template slot-scope="scope">
                            {{scope.row.createTime | dateFormatFun(2)}}
                        </template>
                    </el-table-column>



                    <el-table-column
                            width="320"
                            label="操作" >
                        <template slot-scope="scope">
                            <el-button type="success"  @click="toShowLabelData(scope.row)">查看</el-button>
                            <el-button type="info"  @click="toUpdateLabelData(scope.row)">编辑</el-button>
                            <el-button type="danger"  @click="deleteLabelData(scope.row)">删除</el-button>
                        </template>

                    </el-table-column>
                </el-table>
            </el-card>

        </div>

<!--        新增影资弹出框-->
        <el-dialog
                :title="dialogTitle"
                :visible.sync="dialogVisible"
                width="60%"
                @closed="initData"
                :fullscreen="false"
                :show-close="false"
                center>
            <template slot="title">

                <el-row style="width: 100%" >
                    <el-col :span="8">
                        &nbsp;
                    </el-col>
                    <!--                    标题显示-->
                    <el-col :span="8" style="text-align: center;font-size: 20px">
                        <span>{{dialogTitle}}</span>
                    </el-col>
                </el-row>

            </template>


            <!--            输入标签内容-->
            <div v-if="dialogTitle=='新增标签信息'">
                <div>
                    <el-card class="box-card">
<!--                        输入标签内容-->
                        <el-row type="flex"  justify="center">
                            <el-col :span="8">
                                <el-input
                                        placeholder="请输入标签内容"
                                        prefix-icon="el-icon-guide"
                                        v-model="dialogLabelInfo.content">
                                </el-input>
                            </el-col>
                        </el-row>
<!--                        选择对应的影资-->
                        <el-row type="flex"  justify="center">
                            <el-col :span="20" style="display: flex;align-items: center;justify-content: center;margin: 20px;">
                                <el-transfer
                                        filterable
                                        filter-placeholder="请输入影资名称"
                                        :titles="['待选择影资', '已选择影资']"
                                        v-model="currentCheckedBlogIds"
                                        :data="queryBlogTitleOption">
                                </el-transfer>
                            </el-col>

                        </el-row>

                    </el-card>
                </div>
                <!--                底部栏-->
                <div style="width: 100%">
                    <el-card  style="text-align: center;margin: 10px 0;width: 100%;">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="addLabel">确 定</el-button>
                    </el-card>

                </div>

            </div>

            <!--            编辑标签内容-->
            <div v-else-if="dialogTitle=='编辑标签信息'">
                <div>
                    <el-card class="box-card">
                        <!--                        输入标签内容-->
                        <el-row type="flex"  justify="center">
                            <el-col :span="8">
                                <el-input
                                        placeholder="请输入标签内容"
                                        prefix-icon="el-icon-guide"
                                        v-model="dialogLabelInfo.content">
                                </el-input>
                            </el-col>
                        </el-row>
                        <!--                        选择对应的影资-->
                        <el-row type="flex"  justify="center">
                            <el-col :span="20" style="display: flex;align-items: center;justify-content: center;margin: 20px;">
                                <el-transfer
                                        filterable
                                        :titles="['待选择影资', '已选择影资']"
                                        filter-placeholder="请输入影资拼音"
                                        v-model="currentCheckedBlogIds"
                                        :data="queryBlogTitleOption">
                                </el-transfer>
                            </el-col>

                        </el-row>

                    </el-card>
                </div>
                <!--                底部栏-->
                <div style="width: 100%">
                    <el-card  style="text-align: center;margin: 10px 0;width: 100%;">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="updateLabel">确 定</el-button>
                    </el-card>

                </div>

            </div>

            <!--            编辑标签内容-->
            <div v-else-if="dialogTitle=='查看标签影资信息'">
                <div>
                    <el-card class="box-card">
                        <!--                        输入标签内容-->
                        <el-row type="flex"  justify="center">
                            <el-col :span="8">
                                <el-input
                                        placeholder="请输入标签内容"
                                        prefix-icon="el-icon-guide"
                                        disabled
                                        v-model="dialogLabelInfo.content">
                                </el-input>
                            </el-col>
                        </el-row>
                        <!--                        查看所属的影资信息-->
                        <el-row type="flex"  justify="center">
                            <el-col :span="24" style="display: flex;align-items: center;justify-content: center;margin: 20px;">
                                <el-table
                                        :data="viewBlogData"
                                        :highlight-selection-row="true"
                                        height="380"
                                        style="width: 100%">
                                    <el-table-column
                                            prop="title"
                                            label="标题">
                                    </el-table-column>
                                    <el-table-column
                                            prop="userNickname"
                                            label="发布人">
                                    </el-table-column>
                                    <el-table-column
                                            label="是否允许评论">
                                        <template slot-scope="scope">
                                            <el-switch
                                                    v-model="scope.row.allowComment"
                                                    disabled
                                                    active-color="#13ce66"
                                                    :active-value="1"
                                                    :inactive-value="0"
                                                    inactive-color="#ff4949">
                                            </el-switch>
                                        </template>

                                    </el-table-column>
                                    <el-table-column
                                            label="发布时间">
                                        <template slot-scope="scope">
                                            {{scope.row.createTime | dateFormatFun(2)}}
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-col>

                        </el-row>

                    </el-card>
                </div>
                <!--                底部栏-->
                <div style="width: 100%">
                    <el-card  style="text-align: center;margin: 10px 0;width: 100%;">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </el-card>

                </div>

            </div>

        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "LabelComponent",
        data() {

            return {
                labelData: [],                   //所有的标签信息
                dialogVisible: false,           //新增标签弹出框是否展示
                dialogTitle:"",                 //弹出框的标题
                selectedIds:[],                 //目前选中的id集合
                dialogLabelInfo:{},             //弹窗输入的label信息
                queryBlogTitleOption:[],             //所有的影资title
                currentCheckedBlogIds:[],           //被选中的影资id,即该标签下所有的影资
                viewBlogData:[],                //查看所属影资信息界面的影资信息
                queryLabels_content:"",         //通过内容查询标签
                labelContentData:[],        //所有的标签内容信息

            }
        },
        created() {
            this.mySetItem("breadCrumb",JSON.stringify("标签管理"));
            this.queryAllLabels();
            this.queryAllBlogs();

        },
        methods:{
            //查询所有的影资
            queryAllBlogs(){
                this.request.get("/index/blog/queryAllBlogs").then(res=>{
                    if (res.code=="200"){
                        this.queryBlogTitleOption=res.data.blogs.map(v => ({ key: v.id, label: v.title }));
                    }else{
                        this.$message({
                            message: res.data,
                            type: 'warning'
                        });
                    }
                })
            },
            //初始化数据
            initData(){
                this.queryAllLabels();
                this.dialogLabelInfo={};
                this.currentCheckedBlogIds=[];
                this.labelContentData=[];
                this.viewBlogData=[];
            },
            //跳转到编辑界面
            toUpdateLabelData(label){
                  this.dialogTitle="编辑标签信息";
                  this.dialogLabelInfo=label;
                  this.dialogVisible=true;
                  this.request.get("/index/blog-label/queryByLabelId",{
                      params: {
                          labelId: label.id,
                      }
                  }).then(res=>{
                      if (res.code=="200"){
                          this.currentCheckedBlogIds=res.data.map(v => (v.blogId));
                      }
                  })
            },
            //编辑标签信息
            updateLabel(){
                this.request.post("/index/label/updateLabel",this.dialogLabelInfo).then(res=>{
                    if (res.code=="200"){
                        this.request.post("/index/blog-label/updateBlogLabel",{
                            labelId:this.dialogLabelInfo.id,
                            blogIds:this.currentCheckedBlogIds,
                        }).then(result=>{
                            if (result.code=="200"){
                                this.$message({
                                    message: "更新标签成功",
                                    type: 'success'
                                });
                                this.dialogVisible=false;
                                this.initData();
                            }else {
                                this.$message({
                                    message: result.data,
                                    type: 'warning'
                                });
                            }
                        })
                    }else{
                        this.$message({
                            message: res.data,
                            type: 'warning'
                        });
                    }
                })
            },
            //查询所有的标签信息
            queryAllLabels(val){
                this.request.get("/index/label/queryAllLabels",{
                    params:{
                        id: val>0?val:"",
                    }
                }).then(res=>{
                    if (res.code=="200"){
                        this.labelData=res.data;
                        if (this.labelContentData.length==0){
                            this.labelContentData=this.labelData.map(v=>({id:v.id,content:v.content}));
                            this.labelContentData.unshift({id:0,content:" 查询所有标签"});
                        }

                    }else if(res.code=="301"){
                        this.labelData=[];
                        this.$message({
                            message: res.data,
                            type: 'warning'
                        });
                    }
                })
            },
            //删除标签
            deleteLabelData(label){
                this.request.post("/index/label/deleteLabel",label).then(res=>{
                    if (res.code=='200'){
                        this.$message({
                            message: res.data,
                            type: 'success'
                        });
                        this.queryAllLabels();
                    }else {
                        this.$message({
                            message: res.data,
                            type: 'error'
                        });
                    }
                })
            },
            //批量删除标签
            batchDeleteLabel(){
                this.request.post("/index/label/batchDeleteLabel",this.selectedIds).then(res=>{
                    if (res.code=='200'){
                        this.$message({
                            message: res.data,
                            type: 'success'
                        });
                        this.queryAllLabels();
                    }else {
                        this.$message({
                            message: res.data,
                            type: 'error'
                        });
                    }
                })
            },
            //改变选中的行时调用的方法
            changeSelectedIds(ids){
                this.selectedIds=ids.map(v =>v.id)
            },
            //增加label
            addLabel(){
                this.request.post("/index/label/addLabel",this.dialogLabelInfo).then(res=>{
                    if (res.code=="200"){
                        this.request.post("/index/blog-label/addBlogLabel",{
                            labelId:res.data,
                            blogIds:this.currentCheckedBlogIds,
                        }).then(result=>{
                            if (result.code=="200"){
                                this.$message({
                                    message: "插入标签成功",
                                    type: 'success'
                                });
                                this.dialogVisible=false;
                                this.initData();
                            }else {
                                this.$message({
                                    message: result.data,
                                    type: 'warning'
                                });
                            }
                        })
                    }else{
                        this.$message({
                            message: res.data,
                            type: 'warning'
                        });
                    }
                })
            },
            //跳转到影资展示界面
            toShowLabelData(label){
                this.dialogTitle='查看标签影资信息';
                this.dialogVisible=true;
                this.dialogLabelInfo=label;
                this.request.get("/index/blog/queryAllBlogsByLabelId",{
                    params:{
                        labelId:label.id,
                    }
                }).then(res=>{
                    if (res.code=="200"){
                        this.viewBlogData=res.data;
                    }else if(res.code=="301"){
                        this.$message({
                            message: res.data,
                            type: 'warning'
                        });
                    }
                })
            },


        }
    }
</script>

<style scoped>
    .buttonCardLayout{
        padding:  10px;


    }


    .tableCardLayout{
        padding:  0px 10px 10px 10px;
    }



    .addButton{
        width: 100px;
        border-radius: 10px;
        background: #63b0f4c2;
        border-color: #B5D0EC;
        margin-right: 10px;
        margin-left: 0px;
    }

    .batchDeleteButton{
        width: 100px;
        border-radius: 10px;
        background: rgba(232, 87, 108, 0.47);
        border-color: #d08dba5c;
        margin-right: 10px;
    }






</style>
